<template>
  <div class="simple-topology">
    <div class="topology-header">
      <h3>Kubernetes 节点拓扑 (简化版)</h3>
      <a-button @click="refreshData" :loading="loading">刷新</a-button>
    </div>
    
    <div class="topology-svg-container">
      <svg 
        ref="svgRef"
        :width="svgWidth" 
        :height="svgHeight"
        @click="handleSvgClick"
      >
        <!-- 边/连接线 -->
        <g class="edges">
          <line
            v-for="edge in edges"
            :key="edge.id"
            :x1="getNodePosition(edge.source).x"
            :y1="getNodePosition(edge.source).y"
            :x2="getNodePosition(edge.target).x"
            :y2="getNodePosition(edge.target).y"
            stroke="#d9d9d9"
            stroke-width="2"
            @click="handleEdgeClick(edge, $event)"
            class="topology-edge"
          />
        </g>
        
        <!-- 节点 -->
        <g class="nodes">
          <g 
            v-for="node in nodes"
            :key="node.id"
            :transform="`translate(${getNodePosition(node.id).x}, ${getNodePosition(node.id).y})`"
            class="topology-node"
            @click="handleNodeClick(node, $event)"
          >
            <!-- 节点圆圈 -->
            <circle
              :r="nodeRadius"
              :fill="getNodeColor(node)"
              :stroke="getNodeStroke(node)"
              stroke-width="2"
            />
            
            <!-- 节点标签 -->
            <text
              :y="nodeRadius + 15"
              text-anchor="middle"
              font-size="12"
              fill="#333"
            >
              {{ node.name }}
            </text>
            
            <!-- 状态指示器 -->
            <circle
              v-if="node.status !== 'Ready'"
              :r="5"
              :cx="nodeRadius - 5"
              :cy="-nodeRadius + 5"
              fill="#ff4d4f"
            />
          </g>
        </g>
      </svg>
    </div>

    <!-- 网络延迟模态框 -->
    <a-modal
      v-model:open="modalVisible"
      :title="`网络延迟 - ${selectedEdge?.source} ↔ ${selectedEdge?.target}`"
      width="600px"
      :footer="null"
    >
      <div v-if="selectedEdge" class="latency-content">
        <p>节点连接: {{ selectedEdge.source }} ↔ {{ selectedEdge.target }}</p>
        <div class="latency-stats">
          <a-statistic
            title="平均延迟"
            :value="Math.random() * 20 + 10"
            suffix="ms"
            :precision="2"
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'

interface NodeData {
  id: string
  name: string
  status: string
  role: string
}

interface EdgeData {
  id: string
  source: string
  target: string
}

// 响应式数据
const svgRef = ref<SVGElement>()
const loading = ref(false)
const modalVisible = ref(false)
const selectedEdge = ref<EdgeData | null>(null)

const svgWidth = 800
const svgHeight = 500
const nodeRadius = 25

// 模拟数据
const nodes: NodeData[] = [
  { id: 'master-1', name: 'Master-1', status: 'Ready', role: 'master' },
  { id: 'master-2', name: 'Master-2', status: 'Ready', role: 'master' },
  { id: 'worker-1', name: 'Worker-1', status: 'Ready', role: 'worker' },
  { id: 'worker-2', name: 'Worker-2', status: 'Ready', role: 'worker' },
  { id: 'worker-3', name: 'Worker-3', status: 'NotReady', role: 'worker' },
]

const edges: EdgeData[] = [
  { id: 'edge-1', source: 'master-1', target: 'worker-1' },
  { id: 'edge-2', source: 'master-1', target: 'worker-2' },
  { id: 'edge-3', source: 'master-2', target: 'worker-2' },
  { id: 'edge-4', source: 'master-2', target: 'worker-3' },
  { id: 'edge-5', source: 'master-1', target: 'master-2' },
]

// 节点位置计算
const nodePositions = computed(() => {
  const positions: { [key: string]: { x: number; y: number } } = {}
  
  // 预设位置
  positions['master-1'] = { x: svgWidth * 0.25, y: svgHeight * 0.3 }
  positions['master-2'] = { x: svgWidth * 0.75, y: svgHeight * 0.3 }
  positions['worker-1'] = { x: svgWidth * 0.15, y: svgHeight * 0.7 }
  positions['worker-2'] = { x: svgWidth * 0.5, y: svgHeight * 0.7 }
  positions['worker-3'] = { x: svgWidth * 0.85, y: svgHeight * 0.7 }
  
  return positions
})

const getNodePosition = (nodeId: string) => {
  return nodePositions.value[nodeId] || { x: 100, y: 100 }
}

const getNodeColor = (node: NodeData) => {
  if (node.role === 'master') {
    return node.status === 'Ready' ? '#52c41a' : '#ff4d4f'
  } else {
    return node.status === 'Ready' ? '#1890ff' : '#ff4d4f'
  }
}

const getNodeStroke = (node: NodeData) => {
  return node.role === 'master' ? '#1890ff' : '#52c41a'
}

const handleNodeClick = (node: NodeData, event: MouseEvent) => {
  event.stopPropagation()
  message.info(`节点: ${node.name} (${node.status})`)
}

const handleEdgeClick = (edge: EdgeData, event: MouseEvent) => {
  event.stopPropagation()
  selectedEdge.value = edge
  modalVisible.value = true
}

const handleSvgClick = () => {
  // 点击空白区域时的处理
}

const refreshData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    message.success('数据已刷新')
  }, 1000)
}

onMounted(() => {
  // 初始化完成
})
</script>

<style scoped>
.simple-topology {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.topology-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.topology-header h3 {
  margin: 0;
  color: #262626;
}

.topology-svg-container {
  width: 100%;
  overflow: auto;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: #fafafa;
}

.topology-edge {
  cursor: pointer;
  transition: stroke-width 0.2s;
}

.topology-edge:hover {
  stroke: #1890ff;
  stroke-width: 3;
}

.topology-node {
  cursor: pointer;
}

.topology-node circle {
  transition: all 0.2s;
}

.topology-node:hover circle {
  stroke-width: 3;
  filter: brightness(1.1);
}

.latency-content {
  padding: 16px 0;
}

.latency-stats {
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
}
</style>
